<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页布局与链接</title>
	</head>	
	<style>
		#div01
		{
			width: 100%;
			height: 650px;
			border: 1px solid;
		}
		#div0100
		{
			width: 100%;
			height: 50px;
			border: 1px solid;
		}
		#div0101/*顶部第二个框*/
		{
			width: 100%;
			height: 150px;
			border: 1px solid;
			/*背景图片*/
			background-image: url(img/1.jpg);
			/*背景大小*/
			background-size: 100% 200%;
			/*背景状态 no-repeat不平铺*/
			background-repeat: no-repeat;
		}		
		#div0102
		{
			width: 20%;
			height: 447px;
			border: 1px solid;
			float: left;/*浮动靠左*/
		}
		#div010201,#div010202,#div010203,#div010204
		{
			width: 100%;
			height: 24.5%;
			border: 1px solid;
			float: left;/*浮动靠左*/
		}				
		#div0103
		{
			width: 60%;
			height: 447px;
			border: 1px solid;
			float: left;/*浮动靠左*/
		}
		#div0104
		{
			width: 19%;
			height: 447px;
			border: 1px solid;
			float: left;/*浮动靠左*/
		}
		#div010401,#div010402,#div010403,#div010404
		{
			width: 100%;
			height: 24.5%;
			border: 1px solid;
			float: left;/*浮动靠左*/
		}
		a:link/*鼠标未放上去*/
		{
			text-decoration: none;
		}
		a:hover/*鼠标放上去时候*/
		{
			text-decoration:underline;
			color: red;
			font-family: "楷体";/*类型*/
			font-size: 18px;/*大小*/
		}
		#div02
		{
			width:100%;
			height: 400px;
			border: 1px solid;
			background-color:chocolate;
		}
		#div03
		{
			width:100%;
			height: 400px;
			border: 1px solid;
			background-color:darkslategray;
		}
		#div04
		{
			width:100%;
			height: 400px;
			border: 1px solid;
			background-color: slateblue;
		}
	</style>	
	<body>
		<!--最大div-->
		<div id="div01">
			<!--顶部div-->
			<div id="div0100"></div>
			<!--顶部div-->
			<div id="div0101"></div>
			<!--左边div-->
			<div id="div0102">
				<!--左边div010201-->
				<div id="div010201">
					<ul><!--ul无序列表 li列表项加超链接标签-->
						<li>
							<a href="#yf">衣服</a>
						</li>
						<li>
							<a href="#tx">T恤</a>
						</li>
						<li>
							<a href="#xz">鞋子</a>
						</li>
					</ul>
				</div>
				<!--左边div010202-->
				<div id="div010202">
					<!--有序列表-->
					<ol type="I">
						<li>海贼王</li>
						<li>火影忍者</li>
						<li>叮当</li>
					</ol>
				</div>
				<!--左边div010203-->
				<div id="div010203"></div>
				<!--左边div010204-->
				<div id="div010204"></div>
			</div>
			<!--中间div-->
			<div id="div0103"></div>
			<!--右边div-->
			<div id="div0104">
				<!--右边01div-->
				<div id="div010401"></div>
				<!--右边02div-->
				<div id="div010402"></div>
				<!--右边03div-->
				<div id="div010403"></div>
				<div id="div010404"></div>
			</div>
		</div>
		<!--底部02-->
		<div id="div02">
			<!--锚记--><a name="yf">衣服</a></div>
		<!--底部03-->
		<div id="div03"><a name="tx">T恤</a></div>
		<!--底部04-->
		<div id="div04"><a name="xz">鞋子</a></div>				
	</body>
</html>
